<template>
    <!-- 学生预约咨询页面 -->
    <div class="app-container">
        <div class="title-text">
            <p>在生命中最微不足道但有意义的事务，也比最伟大但无意义的事物更有价值。</p>
            <p>有心理问题时，记得来找我们，029-82601849</p>
        </div>
        <div class="tabs">
            <div class="tabs-header">
                <span class="tabs-nav" v-bind:class="{ 'tabs-nav-selected': activeTab === index }"
                    v-for="(tab, index) in tabs" @click="handleTabClick(index)" :key="index">
                    {{ tab }}
                </span>
                <el-button  style="background-color: #93D2F3;color: #FFF;" @click="mack">预约</el-button>
            </div>
            <div class="tabs-content">
                <div v-show="activeTab == 0">

                    <div class="text-details" v-for="(item, index) in getConsList" :key="index" @click="successMack(item)">
                        <div style="display: flex;justify-content: space-between;" >
                            <h3>预约信息</h3>
                        <el-button :style="activation(item.aptStatus)">{{ item.aptStatus }}</el-button>
                        </div>
                       
                        <el-row>
                            <el-form label-width="90px">
                                <el-col :span="8">
                                    <el-form-item label="预约时段:">{{ item.aptStartEndTimeStr }}
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="预约咨询师:">{{ item.consName }}
                                    </el-form-item>
                                </el-col>
                                <el-col :span="24">
                                    <el-form-item label="咨询诉求:">{{ item.consReqCont }}


                                    </el-form-item>
                                </el-col>

                            </el-form>

                        </el-row>
                    </div>
                </div>
                <div v-show="activeTab == 1">
                    <div class="tab-text" v-for="(item, index) in consultantsList" :key="index">
                        <div>
                            <img :src="item.consAvatar" alt=""
                                style="width: 100px;height: 100px;float: left;margin-right: 10px;">
                            <div style="float: left;">
                                <p>咨询师姓名：{{ item.consName }}</p>
                                <p>咨询师简介：{{ item.consBri }}</p>
                            </div>
                        </div>
                        <div>
                            <el-button style="background-color: #93D2F3;color: #FFF;" @click="order(item)">我要预约</el-button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
    
<script>
import { deptTreeSelect } from "@/api/system/user";
import { getSpecialityByDeptId } from "@/api/information/unitMajor";
import { consAllList, consAptStuList } from '@/api/psychological/reservation'

export default {
    name: "Dict",
    data() {
        return {
            activeTab: 0,
            tabs: ['我的预约', '咨询师'],
            consultantsList: [],
            getConsList: []
        }
    },
    computed: {
        activation() {
            return (status) => {
                if (status = 'D') {
                    return { backgroundColor: '#FEFA83' }
                } else if (status = 'Y') {
                    return {  backgroundColor: '#FEFA83' }
                } else if (status = 'S') {
                    return {  backgroundColor: '#F4CE98' }
                }
            }
        }
        },
        created() {
            consAllList().then(res => {
           
                this.consultantsList = res.data

            })
            this.getList();
            this.department();
        },
        methods: {
            /** 查询字典类型列表 */
            getList() {
                consAptStuList().then(res => {
                    console.log(res, '预约列表')
                    this.getConsList = res.data
                    this.getConsList.forEach(element => {
                       if(element.aptStatus == 'D') {
                        element.aptStatus = '待完成'
                       }else if(element.aptStatus == 'Y'){
                        element.aptStatus = '已完成'
                       }else {
                        element.aptStatus = '爽约'
                       }
                    });
                })
            },
            successMack(data) {
                this.$router.push({path:'/psychological/successMack',query: data})
            },
            handleTabClick(index) {
                this.activeTab = index
            },
            // 获取部门信息
            async department() {
                await deptTreeSelect().then(res => {
                    this.deptOptions = res.data;
                });
            },
            mack() {
                this.$router.push({ path: '/psychological/reservation' })
            },
            order(data) {
                console.log(data)
                this.$router.push({ path: '/psychological/reservation', query: data})
            },
            // 取消按钮
            cancel() {
                this.open = false;
            },

            /** 搜索按钮操作 */
            handleQuery() {
                this.queryParams.pageNum = 1;
                this.getList();
            },
            /** 重置按钮操作 */
            resetQuery() {
                // this.dateRange = [];
                this.resetForm("queryForm");
                this.handleQuery();
            },
            // 下拉树选择
            handleChange(value) {
                if (typeof value == "object") {
                    this.form.deptId = value[value.length - 1];
                    this.queryParams.deptId = value[value.length - 1];
                    this.getSpeciality();
                } else if (typeof value == "number") {
                    this.form.deptId = value;
                    this.getSpeciality();
                } else if (value == undefined) {
                    this.form.specialityId = "";
                }
            },
            getSpeciality() {
                if (this.form.deptId) {
                    getSpecialityByDeptId({ deptId: this.form.deptId }).then(res => {
                        if (res.code == "200") {
                            this.profession = res.data;
                        } else {
                            console.log("123");
                            this.profession = [];
                        }
                    });
                } else {
                    this.profession = [];
                }
            },

            /** 新增按钮操作 */
            handleAdd() {
                this.open = true;
                this.title = "添加";
            },
            // 多选框选中数据
            handleSelectionChange(selection) {
                this.ids = selection.map(item => item.dictId)
                this.single = selection.length != 1
                this.multiple = !selection.length
            },
            /** 修改按钮操作 */
            handleUpdate(row) {
                this.$router.push('/psychological/detailsView')
            },
            /** 提交按钮 */
            submitForm: function () {
                this.$refs["form"].validate(valid => {
                    if (valid) {

                    }
                });
            },
            /** 删除按钮操作 */
            handleDelete(row) {

            },
        }
    };
</script>
<style scoped>
.title-text {
    border: 1px solid #BDBDBD;
    padding-left: 2%;
    padding-right: 2%;
    margin-bottom: 1%
}

.title-text p:nth-child(2) {
    text-align: right;
}

.tabs-header {
    display: flex;
    justify-content: space-between;
    cursor: pointer;
    line-height: 30px;
    height: 30px;
    margin-bottom: 5px;
}

.tabs-nav-selected {
    color: #3192FC;
    border-bottom: 1px solid #3192FC;
    padding-bottom: 3px;
}


.text-details {
    background-color: #EFEFEF;
    padding: 1% 2% 2% 2%;
    margin-bottom: 2%;
}

.tab-text {
    background-color: #EFEFEF;
    padding: 1% 2% 2% 2%;
    margin-bottom: 2%;
    display: flex;
    justify-content: space-between;
}</style>
